<template>

  <el-dialog
    width="100%"
    top="0px"
    :fullscreen="true"
    :title="this.title"
     class="label_font"
    :close-on-click-modal="false"
    :visible.sync="visible">

    <div  id="printMe" >
        <li v-for="(barCode,index) in this.barCodeList" :key="index" style="list-style:none;display：inline-block;">
<div class="div_barcode" style="border: dashed 1px gray;height: 23% ;width: 400px;" align="right">
            <table class="table_barcode"  style="height: 100%;text-align:left;" align="left">
              
                            <tr>
                                <td align="center" width="50%">
                                    <img class="bcode" src=""/>
                                    <input type="hidden" name="acceptid" v-model="barCode.slh">
                                </td>
                            </tr>
                            <tr align="center">
                                <td>
                                    {{barCode.regionName}}
                                    ,{{barCode.barCodeType}}
                                </td>
                            </tr>
                            <tr align="center">
                                <td>
                                    {{barCode.dyqr}}</td>
                            </tr>
                            <tr align="center">
                                <td>
                                    {{barCode.dyr}}</td>
                            </tr>
            </table>
</div>
        </li>

 </div>
    <span slot="footer" class="dialog-footer"> 
      <el-button  type="primary" v-print="printObj">打印</el-button>
      <el-button @click="visible = false">返回</el-button>
    </span>  
 
    
  </el-dialog>




</template>

<script>
  export default {
    data () {


      return {

        printLoading: true,
        printObj: {
          id: "printMe",
          popTitle: '条形码打印',
          beforeOpenCallback (vue) {
            vue.printLoading = true
            console.log('打开之前')
          },
          openCallback (vue) {
            vue.printLoading = false
            console.log('执行了打印')
          },
          closeCallback (vue) {
            console.log('关闭了打印工具')
          }
        },

        visible: false,
        title: '',
        barCodeList: [],
        dataForm: {

        },
        dataRule: {

        }
      }
    },
    watch:{
        barCodeList: function(){
            var _this = this;
            _this.$nextTick(function () {

                 $("table[class='table_barcode']").each(function() {
                        var acceptid = $(this).find ( "input[name='acceptid']" ).val();
                        if(acceptid == ''){
                            $(this).attr("title"," 受理号没有值，无法生成条形码 ") ;
                            
                        }else{
                            $(this).find("img[class='bcode']").JsBarcode(acceptid) ;
                        }
                       
                    });

            });

        }
    },
    methods: {
      init (ids, dataUrl) {
  
        this.visible = true

        this.title = '条形码打印';
        var url = this.$http.adornUrl(`/bdc/cancelregist/printbarcode_ps`)
        if (dataUrl){
          url = dataUrl
        }
        

        this.$nextTick(() => {
       
           this.printCode(ids, url)
          
        })
      },


        printCode(ids, url){

              this.$http({
                  url: url,
                  method: 'post',
                  data: this.$http.adornData(ids, false)
                }).then(({data}) => {
                  if (data && data.code === 0) {
                    this.barCodeList = data.barCodeList
                  }
                  else{
                    this.$message.error(data.msg)
                  }
                }).catch(err => {
                 this.$message.error("系统内部错误")
                 console.error(err);            
              }); 
      },



      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },

      selectChanged(value){
          this.dataForm.region = '';
          this.$http({
          url: this.$http.adornUrl(`/sys/bdcregion/listByLevle`),
              method: 'get',
              params: this.$http.adornParams({'upregion':value})
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.regionList = data.list
            }
        })
      },

      selectChanged2(value){
          this.dataForm.site = ''
          this.$http({
          url: this.$http.adornUrl(`/bdc/bdcsiteinfo/query/` + value),
              method: 'get',
              params: this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.dataForm.siteList = data.siteList
            }
        })
      }

     


    }
  }
</script>
<style>

	.table td {
		vertical-align: middle !important;
	}

	.div_barcode {
		background-color: #FFF;
		float: left;
		width: 40%;
	}

	.table_barcode {
		text-align: center;
		width: 100%;
	}

	.bcode {
		cursor: pointer;
	}

</style>